<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
		<title>消息中心</title>
		<style type="text/css">
		.hui-slide-menu {
		    width:70%;
		    height:100%;
   		    position:fixed;
   		    z-index:99;
		    background:#edf6ff;
	        left:-70%; top:0px;
		}
		
	    .hui-slide-menu ul {
   		    padding:10px;
   		}
	  
	    .hui-slide-menu li {
   		    color:#FFFFFF;
		    line-height:44px;
	 	    height:44px;
	  	    overflow:hidden;
	  }
		
		.big-tag {
	  	    border-radius:40px;
	  	    background:#aacdee;
	  	    font-size:30px;
	  	    text-align:center;
	  	    font-weight:700;
            margin-top:10px;
	  }
    
         .small-tag {
    	    width:70%;
    	    height:35px;
    	    border-radius:40px;
        	float:right;
    	    margin:5px;
    }
    
         .number {
            width:35px;
            height:35px;
            border-radius:40px;
            float:right;
            margin:5px;
    }
    	
    	.day {
    		width:25%;
    		height:45px;
    		margin-left:1%;
    		border-radius:5px;
    		text-align:center;
    		display:inline-block;
    	}
    	
    	.c12 {
    		font-size:25px;
    		color:white;
    		font-weight:700;
    		line-height:45px;
    	}
    	
    	 .message {
    	width:90%;
    	height:50px;
    	border-radius:10px;
    	background: #eaeae8;
    	margin:auto;
    	margin-top:8px;
    }
    
    .message-date {
    	font-size:25px;
    	color:#eedbb0;
    	text-align:left;
    	margin-left:15px;
    	line-height:50px;
    }
    
    .message-tittle {
    	font-size:25px;
    	color:#eedbb0;
    	text-align:left;
    	line-height:50px;
    }
    @keyframes hui-a-menu-show{0%{left:-70%;} 100%{left:0%}}
	@-moz-keyframes hui-a-menu-show{0%{left:-70%;} 100%{left:0%}}
	@-webkit-keyframes hui-a-menu-show{0%{left:-70%;} 100%{left:0%}}
	@-o-keyframes hui-a-menu-show{0%{left:-70%;} 100%{left:0%}}
	.hui-slide-menu-show{-webkit-animation:hui-a-menu-show 0.3s forwards; animation:hui-a-menu-show 0.3s forwards;}
	@keyframes hui-a-menu-hide{0%{left:0%;} 100%{left:-70%}}
	@-moz-keyframes hui-a-menu-hide{0%{left:0%;} 100%{left:-70%}}
	@-webkit-keyframes hui-a-menu-hide{0%{left:0%;} 100%{left:-70%}}
	@-o-keyframes hui-a-menu-hide{0%{left:0%;} 100%{left:-70%}}
	.hui-slide-menu-hide{-webkit-animation:hui-a-menu-hide 0.3s forwards; animation:hui-a-menu-hide 0.3s forwards;}
		</style>
		<link rel="stylesheet" type="text/css" href="../css/hui.css"> 
		<script src="../js/hui-swipe.js"></script> 
	</head>
	<body style="margin:0;background: #ebecf0;">
		<div class="hui-wrap"></div> <!-- 菜单 dom 结构 --> 
		<div class="hui-slide-menu"> 
			<ul> 
				<li><span style="color:orange;font-size:35px;">■ </span><span style="color:#cab09c;font-size:30px;font-weight:700;">拾光博客</span></li> 
				<li class="big-tag">附加功能</li> 
				<li> 
					<div class="small-tag" style="background:#004986;"> 
						<a href="user.html"><p style="color:#fdffee;text-align:center;line-height:39px;">个人中心</p></a> 
					</div> 
					<div class="number" style="background:#004986;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">1</p> 
					</div> </li> <!--个人中心--> 
				<li> 
					<div class="number" style="background:#004277;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">2</p> 
					</div> 
					<div class="small-tag" style="background:#004277;"> 
						<a href="message.html"><p style="color:#fdffee;text-align:center;line-height:39px;">消息中心</p></a> 
					</div> </li> <!--消息中心--> 
				<li> 
					<div class="small-tag" style="background:#0b72b4;"> 
						<a href="image.html"><p style="color:#fdffee;text-align:center;line-height:39px;">图片仓库</p></a> 
					</div> 
					<div class="number" style="background:#0b72b4;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">3</p> 
					</div> </li> <!--图片仓库--> 
				<li> 
					<div class="number" style="background:#63a8cf;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">4</p> 
					</div> 
					<div class="small-tag" style="background:#63a8cf;"> 
						<a href="home.html"><p style="color:#fdffee;text-align:center;line-height:39px;">回到主页</p></a>
					</div> </li> <!--联系我--> 
				<li> 
					<div class="small-tag" style="background:#9abfd2;"> 
						<a href="../index.html"><p style="color:#fdffee;text-align:center;line-height:39px;">退出登录</p> </a>
					</div> 
					<div class="number" style="background:#9abfd2;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">5</p> 
					</div> </li> <!--退出登录--> 
				<li class="big-tag">网址导航</li> 
				<li> 
					<div class="small-tag" style="background:#cc2e26;"> 
						<a href="https://500px.com.cn/"><p style="color:white;text-align:center;line-height:39px;">500px</p></a> 
					</div> 
					<div class="number" style="background:#cc2e26;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">1</p> 
					</div> </li> <!--500px--> 
				<li> 
					<div class="number" style="background:#000000;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">2</p> 
					</div> 
					<div class="small-tag" style="background:#000000;"> 
						<a href="https://unsplash.dogedoge.com/"><p style="color:white;text-align:center;line-height:39px;">Unsplansh</p></a> 
					</div> </li> <!--Unsplash--> 
				<li> 
					<div class="small-tag" style="background:#e06060;"> 
						<a href="https://huaban.com/"><p style="color:white;text-align:center;line-height:39px;">花瓣网</p></a> 
					</div> 
					<div class="number" style="background:#e06060;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">3</p> 
					</div> </li> <!--花瓣网--> 
				<li> 
					<div class="number" style="background:#4080f8;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">4</p> 
					</div> 
					<div class="small-tag" style="background:#4080f8;"> 
						<a href="https://www.ui.cn/"><p style="color:white;text-align:center;line-height:39px;">UI中国</p></a> 
					</div> </li> <!--UI中国--> 
				<li style="padding-top:30px;"> <button type="button" style="width:90%;height:40px;border-radius:10px;background:#dae1e7;margin-left:5%;border:none;" class="button" onclick="hui.closeSlideMenu();">关闭菜单</button> </li> 
			</ul> 
		</div> 
		
		<div class="hengxiang" style="width:100%;height:45px;margin-top:5px;">
			<div class="hui-header-menu" style="width:45px;height:45px;position:absolute;top:5px;left:5px;border-radius:5px;background:#5a769c;" onclick="hui.showSlideMenu();"> 
				<img src="../img/menu.png" width="40%" style="margin-left:30%;margin-top:30%;"> 
			</div>
			
			<div class="waikuang2" style="width:85%;height:45px;white-space:nowrap;overflow-x:scroll;margin-left:15%;">
				<div class="day" style="background:#5a769c;">
					<p class="c12" style="color:#cab09c;">02.01</p>
				</div>
				<div class="day" style="background:#95a7c5;">
					<p class="c12">01.31</p>
				</div>
				<div class="day" style="background:#f0ab7c;">
					<p class="c12">01.30</p>
				</div>
				<div class="day" style="background:#ffd6c5;">
					<p class="c12">01.29</p>
				</div>
				<div class="day" style="background:#f2c2ce;">
					<p class="c12">01.28</p>
				</div>
			</div>
		</div>
		
		<div class="message-mt" style="width:98%;height:45px;background:#5a769c;margin: auto;margin-top:2%;border-radius:10px;">
			<p style="font-size:30px;color:white;font-weight: bold;letter-spacing:2px;line-height:45px;text-indent:1em;">2022.02.01</p>
		</div>
		
		<div class="message-mt" style="width:98%;height:550px;background:#5a769c;margin: auto;margin-top:2%;border-radius:10px;">
			<ul>
			        		<a href="passage3.html"><li class="message">
			        			<span class="message-date" style="color:#cab09c;">系统 |</span>
			        			<span class="message-tittle">消息中心上线了</span>
			        		</li></a>
			        		<a href="passage4.html"><li class="message">
			        			<span class="message-date" style="color:#cab09c;">系统 |</span>
			        			<span class="message-tittle">欢迎访问拾光博客</span>
			        		</li></a>
			        		<a href="passage.html"><li class="message">
			        			<span class="message-date" style="color:#f0ab7c;">转载 |</span>
			        			<span class="message-tittle">元日</span>
			        		</li></a>
			        		<a href="passage1.html"><li class="message">
			        			<span class="message-date" style="color:#adcec5;">原创 |</span>
			        			<span class="message-tittle">今天是春节</span>
			        		</li></a>
			        		<a href="passage2.html"><li class="message">
			        			<span class="message-date" style="color:#adcec5;">原创 |</span>
			        			<span class="message-tittle">北京冬奥会即将开幕</span>
			        		</li></a>
			        	</ul>
		</div>
<script type="text/javascript" src="../js/hui.js" charset="UTF-8"></script> 
		<script>
			/*
			swip
			*/
			hui.slideMenu();
			slide menu;
			*/
			hui.slideMenu();
		</script>  
	</body>
</html>
